<template>
  <div class="mutations">
    <h1>我是父组件,在这里我的两个组件会通过mutations进行传值</h1>
    <div class="my-mutations">
      <h3>我是组件MyMutations</h3>
      <my-mutations></my-mutations>
    </div>
    <div class="my-mutations-two">
      <h3>我是组件MyMutationsTwo</h3>
      <my-mutations-two></my-mutations-two>
    </div>
    <div class="use-mutations-step">
      <h3>实现步骤:</h3>
      <ol>
        <li>1.创建连个子组件,放在一个父组件中,改两个组件的关系是兄弟关系,这次的例子中,放置的组件是:MyMutations和MyMutationsTwo组件</li>
        <li>
          2.在MyMutations组件中,添加一个输入框和一个按钮,输入框的值,使用v-model进行双向绑定,
          <br />然后通过按钮点击事件使用this.$store.commit('mutations中的事件名称', this.inputValue),
          <br />将事件发送到store中的mutations,然后可以在store中的mutations中对值进行操作,
          <br />这里就完成了将MyMutations组件中的值放入到store中
          <br />
        </li>
        <li>
          3.然后创建MyMutations的兄弟组件MyMutationsTwo,使用Vue的computed从store中实时监听MyMutations提交到store后并在mutations中处理后的输入框的值,
          <br />获取值得代码为
          <br />computed: {
          <br />inputValue() {
          <br />return store.state.inputValue;
          <br />}
          <br />}
          <br />在MyMutationsTwo组件中获取值之后,就可以对值进行操作和使用了
        </li>
        <li>
          4.最后将MyMutations和MyMutationsTwo组件引入,然后在输入框中输入值,然后点击"提交mutations"按钮,
          <br />MyMutationsT组件中就会显示在mutations中处理过的值
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import MyMutations from "./../vueKnowledge/ChildCompoment/MyMutations";
import MyMutationsTwo from "./../vueKnowledge/ChildCompoment/MyMutationsTwo";
export default {
  name: "UseMutations",
  components: { MyMutations, MyMutationsTwo },
  data() {
    return {};
  }
};
</script>

<style scoped>
.mutations,
.my-mutations {
  margin-left: 20px;
}
.my-mutations {
  text-align: center;
}
.my-mutations h3{
    margin-bottom: 20px;
}
.mutations h1,.my-mutations-two h3{
  text-align: center;
}
.my-mutations-two,
.my-mutations {
  margin-top: 50px;
}
.use-mutations-step {
  margin-top: 50px;
  margin-left: 100px;
}
</style>